<template>
	<view class="my-store-info">

		<view class="addset" @tap="addSet">新增喇叭</view>
		<view class="store-form" v-for="(item,index) in cardList" :key="index">
			<u-cell-group :border="false">
				<u-cell title="设备名字:" :border="false"  @click="Unbind(item)" :arrow="false">
					<view class="label" slot="value">{{item.deviceName}}</view>
					<view slot="right-icon"><u-icon name="trash-fill" size="24" color="#fe3056"></u-icon></view>
				</u-cell>
			</u-cell-group>
		</view>
		
		<u-popup :show="showOne" mode="center" :round="10" :closeOnClickOverlay="true" @close="closeOne">
			<view class="show-box">
				<view class="title">喇叭号</view>
				<view class="input-box"><u--input placeholder="请输入喇叭编号" border="bottom" v-model="deviceName"></u--input>
				</view>
				<view class="tip">提示：设备流水累计达标一个设备后再累计其他设备，不会同时累计多个设备</view>
				<view class="sure" @click="submit">确定</view>
			</view>
		</u-popup>
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" :content='content'
			:showCancelButton="true"></u-modal>
	</view>
</template>

<script>
	const app = getApp();
	const globalData = app.globalData;
	const apiUrl = globalData.wxApi;
	const wxImg = globalData.wxImg;
	import {
		getStoreData,
		dealNum,
		httpPost,
		httpGet,
		bdMapToTxMap,
		txMapToBdMap,
	} from "@/utils/http.js";
	import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
	import uQRCode from '@/common/uqrcode.js'
	const pic1 = require(`@/img/my/my1.png`);
	export default {
		data() {
			return {
				wxImg,
				apiUrl,
				dealNum,
				pic1,
				terminalInfo: {
					subStoreId: "",
					terminalId: "",
					storeId: ""
				},
				cardList: [],
				storeId: "",
				showOne: false,
				deviceName: "",
				show:false,
				content:"确定要解除喇叭绑定吗？",
				iotId:""


			};
		},

		onShow() {

		},
		onUnload() {

		},
		onLoad(options) {
			console.log(options)
			this.terminalInfo = JSON.parse(options.terminalInfo);
			this.storeId = options.storeId;
			this.getTerminalList();
		},
		methods: {
			getTerminalList() {
				const _this = this;
				httpPost(`/api/iotdevice/list`, {
					storeId: _this.terminalInfo.storeId,
					subStoreId: _this.terminalInfo.subStoreId,
					terminalId: _this.terminalInfo.terminalId
				}).then((res) => {
					if (res.code == 0) {
						_this.cardList = res.data;
					}
				});
			},
			addSet() {
				this.showOne = true;
			},
			Unbind(terminalInfo) {
			 this.iotId=terminalInfo.iotId;
			 this.show=true;
			},
			closeOne() {
				this.showOne = false;
			},
			submit() {
				const _this = this;
				if (!this.deviceName) {
					wx.showToast({
						icon: "none",
						title: "请输入喇叭编号"
					});
					return;
				}
				httpPost(`/api/iotdevice/bindVoice`, {
					deviceName: this.deviceName,
					deviceType: 1,
					terminalId: this.terminalInfo.terminalId
				}).then((res) => {
                         _this.showOne = false;
				});
				
			},
			confirm(){
				const _this = this;
				httpGet(`/api/iotdevice/unBindVoice/`+_this.iotId).then((res) => {
				        if(res.code==0){
							wx.showToast({
								icon: "none",
								title: "解绑成功"
							});
							_this.show=false;
						}
				});
			},
			cancel(){
				this.show=false;
			}


		},
	};
</script>

<style lang="scss">
	.my-store-info {
		background-color: #f4f5f7;
		height: calc(100vh - 20rpx);
		padding-top: 20rpx;
	}

	.head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: 700;
		}
	}

	.store-form {
		background-color: #fff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.show-box {
		width: 540rpx;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			text-align: center;
			font-weight: 600;
		}

		.tip {
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}

		.input-box {
			margin-top: 20rpx;
		}

		.sure {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 70rpx;
			background: linear-gradient(to right, #37AFFA, #74D6FF);
			color: #fff;
			margin-left: 170rpx;
			margin-top: 40rpx;
		}
	}

	.show-box-two {
		width: 570rpx;
		padding: 40rpx;
		border-radius: 10rpx;

		.code-box {
			width: 400rpx;
			height: 400rpx;
			border: 2rpx solid #f4f5f7;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			margin-left: 85rpx;
		}

		.tip {
			font-size: 24rpx;
			color: #AAAAAA;
		}

		.title {
			text-align: center;
		}
	}

	.addset {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #37AFFA;
		color: #fff;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
	}
</style>